<template>
  <el-menu
    :collapse="isCollapse"
    active-text-color="#fff"
    background-color="#001529"
    class="el-menu-vertical-demo"
    :default-active="activeIndex"
    text-color="#fff"
    @open="handleOpen"
    @close="handleClose"
    style="height: 100%; overflow: hidden"
    :router="true"
  >
    <div class="logo" :style="{ width: isCollapse ? '30px' : '150px' }">
      {{ title }}
    </div>

    <template v-for="item in menuList" :key="item.index">
      <el-menu-item v-if="!item.children" :index="item.index">
        <el-icon>
          <component :is="item.icon"></component>
        </el-icon>
        <span>{{ item.title }}</span>
      </el-menu-item>

      <el-sub-menu v-if="item.children" :index="item.index">
        <template #title>
          <el-icon>
            <component :is="item.icon"></component>
          </el-icon>
          <span>{{ item.title }}</span>
        </template>
        <el-menu-item v-for="value in item.children" :index="value.index">
          <el-icon>
            <component :is="value.icon"></component>
          </el-icon>
          <span>{{ value.title }}</span>
        </el-menu-item>
      </el-sub-menu>
    </template>
  </el-menu>
</template>

<script>
import { mapState } from "vuex";

export const menuList = [
  {
    title: "系统首页",
    index: "/home/main",
    icon: "House",
    // key是用来匹配权限的,是和后端约定
    key: "/",
  },
  {
    title: "轮播图管理",
    index: "2",
    icon: "Location",
    key: "/banner",
    children: [
      {
        title: "轮播图列表",
        index: "/home/bannerlist",
        icon: "Location",
        key: "/banner/list",
      },
      {
        title: "添加轮播图",
        index: "/home/banneradd",
        icon: "Location",
        key: "/banner/add",
      },
    ],
  },
  {
    title: "产品管理",
    index: "3",
    icon: "Compass",
    key: "/pro",
    children: [
      {
        title: "产品列表",
        index: "/home/project",
        icon: "Compass",
        key: "/pro/list",
      },
      {
        title: "推荐列表",
        index: "3-2",
        icon: "Compass",
        key: "/pro/recommend",
      },
      {
        title: "秒杀列表",
        index: "3-3",
        icon: "Compass",
        key: "/pro/seckill",
      },
      {
        title: "筛选列表",
        index: "3-4",
        icon: "Compass",
        key: "/pro/search",
      },
    ],
  },
  {
    title: "账号管理",
    index: "4",
    icon: "Compass",
    key: "/user",
    children: [
      {
        title: "用户列表",
        index: "/home/userlist",
        icon: "Compass",
        key: "/user/list",
      },
      {
        title: "管理员列表",
        index: "/home/useradmin",
        icon: "Compass",
        key: "/user/admin",
      },
    ],
  },
  {
    title: "数据可视化",
    index: "5",
    icon: "Compass",
    key: "/data",
    children: [
      {
        title: "echarts",
        index: "/home/echarts",
        icon: "Compass",
        key: "/data/echarts",
      },
    ],
  },
  {
    title: "编辑器",
    index: "6",
    icon: "Compass",
    key: "/editor",
    children: [
      {
        title: "富文本编辑器",
        index: "/home/editor",
        icon: "Compass",
        key: "/editor/index",
      },
      {
        title: "MD编辑器",
        index: "/home/md",
        icon: "Compass",
        key: "/editor/md",
      },
    ],
  },
  {
    title: "文件处理",
    index: "7",
    icon: "Compass",
    key: "/excel",
    children: [
      {
        title: "导出excel",
        index: "/home/export",
        icon: "Compass",
        key: "/excel/export",
      },
      {
        title: "导入excel",
        index: "/home/import",
        icon: "Compass",
        key: "/excel/import",
      },
    ],
  },
  {
    title: "地图",
    index: "8",
    icon: "Compass",
    key: "/map",
    children: [
      {
        title: "高德地图",
        index: "/home/map",
        icon: "Compass",
        key: "/map/index",
      },
    ],
  },
];

// const menuList2 = [
//   {
//     title: "系统首页",
//     index: "/home/main",
//     icon: "House",
//     // key是用来匹配权限的,是和后端约定
//     key: "/",
//   },
//   {
//     title: "轮播图管理",
//     index: "2",
//     icon: "Location",
//     key: "/banner",
//     children: [
//       {
//         title: "轮播图列表",
//         index: "/home/bannerlist",
//         icon: "Location",
//         key: "/banner/list",
//       },
//       {
//         title: "添加轮播图",
//         index: "/home/banneradd",
//         icon: "Location",
//         key: "/banner/add",
//       },
//     ],
//   },
//   {
//     title: "产品管理",
//     index: "3",
//     icon: "Compass",
//     key: "/pro",
//     children: [
//       {
//         title: "产品列表",
//         index: "/home/project",
//         icon: "Compass",
//         key: "/pro/list",
//       },
//       {
//         title: "推荐列表",
//         index: "3-2",
//         icon: "Compass",
//         key: "/pro/recommend",
//       },
//       {
//         title: "秒杀列表",
//         index: "3-3",
//         icon: "Compass",
//         key: "/pro/seckill",
//       },
//       {
//         title: "筛选列表",
//         index: "3-4",
//         icon: "Compass",
//         key: "/pro/search",
//       },
//     ],
//   },
//   {
//     title: "账号管理",
//     index: "4",
//     icon: "Compass",
//     key: "/user",
//     children: [
//       {
//         title: "用户列表",
//         index: "/home/userlist",
//         icon: "Compass",
//         key: "/user/list",
//       },
//       {
//         title: "管理员列表",
//         index: "/home/useradmin",
//         icon: "Compass",
//         key: "/user/admin",
//       },
//     ],
//   },
//   {
//     title: "编辑器",
//     index: "6",
//     icon: "Compass",
//     key: "/editor",
//     children: [
//       {
//         title: "富文本编辑器",
//         index: "6-1",
//         icon: "Compass",
//         key: "/editor/index",
//       },
//       {
//         title: "MD编辑器",
//         index: "6-2",
//         icon: "Compass",
//         key: "/editor/md",
//       },
//     ],
//   },
// ];

export default {
  // props: {
  //   isCollapse: Boolean,
  // },
  data() {
    return {
      menuList: menuList,
      activeIndex: "",
    };
  },
  computed: mapState("home", ["title", "isCollapse"]),
  created() {
    // if (localStorage.getItem("role") === "1") {
    //   this.menuList = menuList2;
    // } else if (localStorage.getItem("role") === "2") {
    //   this.menuList = menuList;
    // }

    // const adminname = localStorage.getItem("adminname");
    const adminname = this.$store.state.home.adminname;
    if (adminname === "admin") {
      this.menuList = menuList;
    } else {
      const keys = JSON.parse(localStorage.getItem("keys"));
      console.log(keys);
      // ['/', '/banner', '/banner/list', '/banner/add', '/pro', '/pro/list', '/pro/recommend', '/pro/seckill', '/pro/search']
      this.menuList = menuList.filter((item) => keys.includes(item.key));
    }

    menuList.forEach((item) => {
      if (item.index === this.$route.path) {
        this.activeIndex = item.index;
      } else {
        item.children &&
          item.children.forEach((val) => {
            if (val.index === this.$route.path) {
              this.activeIndex = val.index;
            }
          });
      }
    });
  },
  methods: {
    handleOpen(key, keyPath) {
      // console.log(key, keyPath);
    },
    handleClose(key, keyPath) {
      // console.log(key, keyPath);
    },
  },
};
</script>

<style scoped>
.logo {
  height: 32px;
  background: hsla(0, 0%, 100%, 0.3);
  margin: 20px;
}

.is-active {
  background: #409eff;
}
</style>
